<template>
	<view class="detail">
		<detail-head type="none"></detail-head>
		<view class="content">
			<view class="addr">
				<view class="addrInfo">
					<view class="value">{{setStringStylecode(user.userCode)}}</view>
					<view class="copy" @click="$tool.copyText(user.userCode)"></view>
				</view>
				<view class="hint">
					该钱包账户由平台代理创建，帮助您储存虚拟作品、完成链上交易。未经您的允许，平台不会干预该账户的任何信息。
				</view>
			</view>
			<view class="pord">
				<image class="img" :src="detail.activityProductVO ? detail.activityProductVO.subPctureUrl : ''"
					mode="aspectFit">
				</image>
				<view class="title">{{detail.activityProductVO?detail.activityProductVO.worksName:''}}
					<text>¥{{detail.tradeAmount}}</text>
				</view>
				<view class="desc">全球首发{{detail.activityProductVO?detail.activityProductVO.total:''}}份
					<text>#{{detail.activityProductVO?detail.activityProductVO.worksNum:''}}/{{detail.activityProductVO?detail.activityProductVO.total:''}}</text>
				</view>
			</view>
			<view class="pay-hint"> 注意：请注意核实付款价格，谨慎付款。</view>
			<view class="auth">
				<checkbox-group @change="onAuthChange">
					<label>
						<checkbox :checked="auth" color="#FFBD47" />我已同意SKY<text class="text"
							@click="$tool.navigateTo('/pages/rule/rule')">《服务条款》</text>
					</label>
				</checkbox-group>
			</view>
			<button class="paybtn" type="default" @click="onToggleMenu(true, 'pwd')">立即购买</button>
		</view>
		<uni-popup ref="pwd" type="bottom">
			<view class="popup">
				<view class="value">
					<view class="item" v-for="i in 6">
						<text>{{ !!valArr.val[i-1] ? '*' : '' }}</text>
					</view>
				</view>
				<view class="hint">密码为6位数字</view>
				<numberKeyboard tabBar ref='KeyboarHid' @input='clickInput' :psdLength='valArr.length'></numberKeyboard>

			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		cancelPay,
		getPayDetails
	} from '../../request/bill.js'
	import {
		getUserinfo,
		setStringStylecode
	} from '../../utils/utils.js'
	import {
		getSysUser
	} from '../../request/mine.js'
	import {
		balancePay
	} from '../../request/common-api.js'

	export default {
		data() {
			return {
				// 用户信息
				user: {},
				// 详情
				detail: {},
				// 政策
				auth: false,
				// 密码
				smsCode: '',
				// 密码输入框配置
				valArr: {
					val: '',
					length: 6
				},
				setStringStylecode
			}
		},

		watch: {
			smsCode: {
				handler(n) {
					if (n.length === 6) {
						this.onBalancePay()
						this.onToggleMenu(false, 'pwd')
						this.smsCode = ''
						this.valArr.val = ''
					}
				}
			}
		},

		onLoad(option) {
			this.onloadDetail(option.id)
		},

		mounted() {
			this.user = getUserinfo()
		},

		methods: {
			// popup 切换
			onToggleMenu(show, refName) {
				if (!show) {
					this.$tool.popupToggle(show, this, refName, 'bottom')
					return false
				}
				if (!this.auth) {
					uni.showToast({
						title: '请阅读并勾选用户协议',
						icon: 'none'
					})
					return false
				}
				if (show && !this.user.idCard) {
					uni.showToast({
						title: '请先完成用户实名登记',
						icon: 'none'
					})
					setTimeout(() => {
						this.$tool.navigateTo('/pages/real-name/real-name')
					}, 500)
					return false
				}
				if (show && this.auth) {
					this.$tool.popupToggle(show, this, refName, 'bottom')
				}

			},

			//输入的值
			clickInput(val) {
				this.valArr.val = val
				this.smsCode = val
			},

			// 隐私
			onAuthChange(e) {
				this.auth = e.detail.value.length ? true : false
			},

			// 更新用户数据
			async updateUserInfo() {
				try {
					let {
						code,
						data
					} = await getSysUser()
					if (code === 200) {
						let user = JSON.parse(uni.getStorageSync('user'))
						user = {
							...user,
							...data
						}
						this.user = user
						uni.setStorageSync('user', JSON.stringify(user))
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}

			},

			async onBalancePay() {
				try {
					let {
						code,
						message,
						data
					} = await balancePay(this.detail.id, this.smsCode)
					if (code === 200) {
						this.updateUserInfo()
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						})
						setTimeout(() => {
							this.$tool.navigateTo(`/pages/home/detail?id=${this.detail.activityProductVO.id}`)
						}, 800)

					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},

			// 加载订单详情
			async onloadDetail(id) {
				try {
					let {
						code,
						message,
						data
					} = await getPayDetails(id)
					if (code === 200) {
						this.detail = data
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../static/css/pay.scss';
</style>
